import React,{useState,useRef, useEffect} from 'react'
import pageLayout from '../common/PageLayout';
import { withRouter } from 'react-router-dom'
import './index.less'
import { dateFormat } from '../../util'
import echarts from 'echarts'
import { barChartOptions, pieChartOptions } from './MakeOptions'
import { collectionApi } from '../../apis/homeApi'
import io from 'socket.io-client'

function Home() {
    // console.log(arguments);

    const [data, setData] = useState(''),
        barChart = useRef(),
        pieChart =useRef()

    // function dateFormat(type) {
    //     let _d = new Date(),
    //         YYYY = _d.getFullYear(),
    //         MM = _d.getMonth() + 1,
    //         DD = _d.getDate(),
    //         hh = _d.getHours(),
    //         mm = _d.getMinutes(),
    //         ss = _d.getSeconds()

    //     MM = MM > 9 ? MM : `0${MM}`
    //     DD = DD > 9 ? DD : `0${DD}`
    //     hh = hh > 9 ? hh : `0${hh}`
    //     mm = mm > 9 ? mm : `0${mm}`
    //     ss = ss > 9 ? ss : `0${ss}`

    //     let obj = {YYYY, MM, DD, hh, mm, ss}
    //     return type.replace(/(YYYY)|(MM)|(DD)|(hh)|(mm)|(ss)/g, function(str){
    //         return obj[str]
    //         // console.log();
    //         // return 'test'
    //     })
    // }

    // 如果要当一个生命周期来使用的时候，需要用到到卸载生命周期，回调方法不能添加async关键字
    // useEffect(async function() {
    useEffect(function() {
        setData(dateFormat('YYYY年MM月DD日'))

        // 对bar echarts进行实例化
        let charNode = echarts.init(barChart.current)

        //调用轮询方法
        loopBarChart(charNode)

        //对pie echarts进行实例化
        let pieChartNode = echarts.init(pieChart.current)

        //实现长连接获取数据
        // io('http://www.shuiyue.info:16800')
        //io方法执行完成以后，会返回一个socket对象
        let socket = io('ws://www.shuiyue.info:16800')

        //监听连接消息，如果连接成功会执行回调
        socket.on('connect', function() {
            console.log('-----q--');
            socket.emit('clientEvt', {type: 'getTodayHot'})
        })

        //接收消息
        socket.on('serverEvt', function(data) {
            // console.log(arguments);
            //接收数据并执行绘制
            let options = pieChartOptions(data)
            //绘制pie chart
            pieChartNode.setOption(options)
        })

        

        //实现页面的chart进行重绘和防抖功能
        let timer = null
        function resizeFunc() {
            console.log('--------');
            //实现防抖功能，因此需要对定时器进行清理
            if (!!timer) {
                // 清除定时器
                clearTimeout(timer)
                timer = null
            }
            // echarts重置图形
            timer = setTimeout(function() {
                console.log('*******');
                charNode.resize()
            },400)
        }
        window.addEventListener('resize',resizeFunc)

        // 离开当前页面卸载定时器和注销resize事件
        return function() {
            // debugger
            window.removeEventListener('resize',resizeFunc)
        }
        
    },[])

    //轮询
    async function loopBarChart(charNode) {

        let result = await collectionApi()

        if(result.code === 200 ) {
            
            let option = barChartOptions(result.data)

            charNode.setOption(option)
        }

        //指定一个任务
        setTimeout(function() {
            loopBarChart(charNode)
        },2000)
    }

    return (
        <div className="home-container">
            <div className="block">
                今天是：{data}
            </div>
            <div className="block right">
                <div ref={barChart} className="chart-box"></div>
            </div>
            <div className="block">
                <div ref={pieChart} className="chart-box"></div>
            </div>
            <div className="block right"></div>
        </div>
    )
}

export default pageLayout(withRouter(Home))
